<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" class="ie6 no-js" lang="en">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" class="ie7 no-js" lang="en">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" class="ie8 no-js" lang="en">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<title>Prototype - Grid | blam</title>
	
	<meta name="description" content="Grid Prototype by Betsy Lam" />	
	<meta name="author" content="Betsy Lam" />
	<meta name="copyright" content="Copyright Betsy Lam 2012. All Rights Reserved." />
	
	<meta name="google-site-verification" content="" />
	
	<link rel="shortcut icon" href="imgs/favicon.png" />
	
	<!-- Default/Small view - iPhone (portrait) -->
	<link rel="stylesheet" media="screen and (min-width: 320px)" href="styles/screen-sm.css" />
	<!-- Medium view - iPad (portrait) -->
	<link rel="stylesheet" media="screen and (min-width: 768px)" href="styles/screen-md.css" />
	<!-- Large view - Desktop, iPad (landscape) -->
	<link rel="stylesheet" media="screen and (min-width: 960px)" href="styles/screen-lg.css" />
	
	<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="scripts/libs/jquery-1.8.2.min.js"%3E%3C/script%3E'))</script>
	
	<!--[if IE]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>

<div class="wrap-outer">

	<div class="js-panels-wrap wrap-inner">

		<header>
			<nav class="nav-main">
			</nav>
		</header>


		<div id="row-1" class="panels-row" data-row="suffix">

			<article id="panel-1" class="mod-panel panel-1 panel-1-box" data-panel-target="1">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1">Default bacon ipsum dolor sit amet</h1>
					<p class="text-1">
						Boudin ground round drumstick meatloaf <span class="panel-more" title="More">+</span>
					</p>
				</div>

				<section class="js-panel-content">
					<h2 class="heading">Expand meatloaf chicken filet mignon, short loin chuck beef ribs kielbasa.</h2>
					
					<ul class="list-h">
						<li>Drumstick</li>
						<li>drumstick</li>
						<li>drumstick</li>
						<li>drumstick</li>
					</ul>

					<ol class="list-h">
						<li>Small: a little</li>
						<li>Medium: a little more</li>
						<li>Large: a lot more</li>
					</ol>

					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

			<article id="panel-2" class="mod-panel panel-2 panel-2-box" data-panel-target="2">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1">
						Hamburger pas trami  <span class="panel-more" title="More">+</span>
					</h1>
				</div>

				<section class="js-panel-content">
					<h2 class="heading">Bresaola beef capicola shank</h2>
					<p>T-bone hamburger ham bacon ribeye jerky, pork corned beef spare ribs tongue beef ribs chuck short ribs.</p>

					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

		</div><!-- END row 1 -->

		<div id="row-2" class="panels-row" data-row="suffix">

			<!-- "0 Calories" Panel flips -->
			<article class="mod-panel panel-3 panel-3-box">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1">Andouille leberkas</h1>
					<p class="text-1">Salami pork belly frankfurter</p>
				</div>

				<section class="js-panel-content">
					<h2 class="heading">Box 3 Content</h2>
					<p>T-bone hamburger ham bacon ribeye jerky, pork corned beef spare ribs tongue beef ribs chuck short ribs.</p>

					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

			<article id="panel-5" class="mod-panel panel-5 panel-5-box" data-panel-target="5">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1 heading-1-alt">Beef ribs short ribs</h1>
					<h2 class="heading heading-2">Kielbasa pork chop hamburger</h2>
					<p class="text-2">Meatloaf turkey swine</p>
				</div>

				<section class="js-panel-content">
					<h2 class="heading">Box 5 Content</h2>
					<p>T-bone hamburger ham bacon ribeye jerky, pork corned beef spare ribs tongue beef ribs chuck short ribs.</p>

					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

			<article id="panel-6" class="mod-panel panel-6 panel-6-box" data-panel-target="6">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1 heading-1-alt">
						Pork chuck meatloaf pig
					</h1>
				</div>

				<section class="js-panel-content">
					<h2 class="heading heading-2">Piglets are cute</h2>
					<p class="text-2">Turducken tri-tip shankle swine, strip steak bresaola pig ribeye prosciutto beef ribs. Bacon short loin filet mignon venison spare ribs drumstick shankle turducken hamburger salami biltong ham jowl boudin turkey. Sirloin corned beef bresaola sausage tail tongue tri-tip jerky flank shoulder ribeye capicola shankle cow.</p>
					<p class="text-2">Doner capicola sirloin, shankle prosciutto salami swine short ribs turkey pork loin pork belly chuck boudin pastrami jowl.</p>
					
					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

			<article class="mod-panel panel-7 panel-7-box">
				<h1 class="heading heading-1">Box 7</h1>
			</article>
		</div><!-- END row 2 -->

		<div id="row-3" class="panels-row" data-row="prefix">

			<article id="panel-8" class="mod-panel panel-8 panel-8-box" data-panel-target="8">

				<div class="js-panel-teaser panel-teaser">
					<h1 class="heading heading-1">Box 8</h1>
				</div>

				<section class="js-panel-content">
					<h2 class="heading heading-2">Venison cow shank ham</h2>
					<p>Hamburger ball tip beef ribs andouille turkey meatball pig, rump tail pastrami ground round.</p>
					
					<a href="#" class="js-panel-close panel-close" title="Less">x</a>
				</section>

			</article>

			<article class="mod-panel panel-9 panel-9-box">
				<h1 class="heading heading-1">Box 9</h1>
			</article>

			<article class="mod-panel panel-10 panel-10-box">
				<h1 class="heading heading-1">Box 10</h1>
			</article>

			<article class="mod-panel panel-11 panel-11-box">
				<h1 class="heading heading-1">Box 11</h1>
			</article>

			<article class="mod-panel panel-12 panel-12-box">
				<h1 class="heading heading-1">Box 12</h1>
			</article>
		</div><!-- END row 3 -->

		<!-- User JS controls -->
		<section class="mod-animate">
			<h1 class="animate-heading">Animation Options</h1>

			<ul>
				<li data-animate="1">
					<label class="simple-label" for="option-1"><strong>Option 1:</strong> Basic slide &amp; scroll</label>
					<input id="option1" class="simple-input simple-button" name="option-1" type="button" value="Animate" data-panel-target="option1" />
				</li>

				<li data-animate="2">
					<label class="simple-label" for="option-2"><strong>Option #2:</strong> Row slide &amp; scroll</label>
					<input id="option2" class="simple-input simple-button" name="option-2" type="button" value="Animate" data-panel-target="option2" />
				</li>

				<li data-animate="3">
					<label class="simple-label" for="option-3"><strong>Option #3:</strong> Row and panel slide &amp; scroll</label>
					<input id="option3" class="simple-input simple-button" name="option-3" type="button" value="Animate" data-panel-target="option3" />
				</li>

				<li data-animate="4">
					<label class="simple-label" for="option-4"><strong>Option #4:</strong>Bounce slide &amp; scroll</label>
					<input id="option4" class="simple-input simple-button" name="option-4" type="button" value="Animate" data-panel-target="option4" />
				</li>

				<li data-animate="5">
					<label class="simple-label" for="option-5"><strong>Option #5:</strong>Swing Bounce slide &amp; scroll</label>
					<input id="option5" class="simple-input simple-button" name="option-5" type="button" value="Animate" data-panel-target="option5" />
				</li>

		</section>


		<footer class="footer-wrap">

		</footer>

	</div>
</div>

<!-- Greensock Animation Library -->
<!-- 
<script src="scripts/libs/greensock-v12/minified/plugins/CSSPlugin.min.js" type="text/javascript"></script>
<script src="scripts/libs/greensock-v12/minified/easing/EasePack.min.js" type="text/javascript"></script>
<script src="scripts/libs/greensock-v12/minified/TweenLite.min.js" type="text/javascript"></script> 
-->

<!-- Easing for smoother animations -->
<script src="scripts/libs/jquery-easing-v1.3.js" type="text/javascript"></script>
<!-- Crystal Light Global JS -->
<script src="scripts/global.js" type="text/javascript"></script>    

</body>
</html>




